<template>
  <div>
    <el-container>
        <el-header>
          <el-row class="header-row">
            <el-col :span="12">
              <h1>{{display_name}}</h1>
              <span>{{ orgName }}  文章数量：{{ works_count }}   ISSN：{{ issn_l }}</span>
            </el-col>
            <el-col :span="12" class="search-col">
              <el-form :inline="true">
                <el-form-item label="搜索期刊内文章:">
                  <el-input 
                  v-model="searchTerm" 
                  @input="searchWorks" 
                  @change="searchWorks"
                  clearable/>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-header>
        <el-scrollbar height="100vh">
          <el-main>
            <el-row>
              <el-col :span="24">
                <el-alert
                  v-if="works_show.length === 0"
                  title="暂无文章"
                  type="info"
                  show-icon
                />
                <div v-for="work in works_show" :key="work.id" class="work-item" @click="toWork(work.id)">
                  <h2>{{ work.title }}</h2>
                  <p class="info">作者: {{ work.first_author }}</p>
                  <p class="info">出版日期: {{ work.publication_date }}</p>
                  <el-button @click="downloadWork(work.id)" type="success" size="mini">下载</el-button>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-scrollbar>
      </el-container>
  </div>
</template>

<script>
import { req_getVenueInfo } from '@/api/index.js'

export default {
  components: {
  },
  data() {
    return {
      journalId: 0,
      orgId: 0,
      orgName: "未知组织",
      display_name: "未知期刊",
      works_count: 0,
      issn_l: 0,
      works_show: [],
      works_list: [],
      searchTerm: '',
    };
  },
  mounted() {
    // this.journalId = this.$route.params.id;
    this.getVenueInfo(this.journalId)
    this.works_list = [
      {
        id: "W2513506562",
				title: "title",
				publication_date: "2016-10-18",
				language: "英语",
				first_author: "Torbjørn Rognes",
      },
      {
        id: "W25asdad2",
				title: "66666",
				publication_date: "2016-10-18",
				language: "中文",
				first_author: "zht",
      },
      {
        id: "W25asdad2",
				title: "6789",
				publication_date: "1999-4-23",
				language: "中文",
				first_author: "zht",
      },
    ]
    this.works_show = this.works_list;
  },
  methods: {
    downloadWork(workId) {
    },
    searchWorks() {
      // 根据关键词搜索文献
      const searchTerm = this.searchTerm.toLowerCase();
      this.works_show = this.works_list.filter(
        doc =>
          doc.title.toLowerCase().includes(searchTerm) ||
          doc.first_author.toLowerCase().includes(searchTerm) ||
          doc.publication_date.includes(searchTerm)
      );
    },
    getVenueInfo(journalId){
      req_getVenueInfo(journalId).then(res => {
        const errno = response.data.errno;
        const msg = response.data.msg;
        if (errno === 1) {          
          this.orgId = res.data.venue.orgId;
          this.display_name = res.data.venue.display_name;
          this.works_count = res.data.venue.works_count;
          this.issn_l = res.data.venue.issn_l;
          this.works_list = res.data.venue.results;
          ElMessage.info(msg);

        } else if (errno === 1001 || errno === 1002 || errno === 1003 || errno === 2001) {
            ElMessage.info(msg);
        } else {
          console.error('Error getting venue:', msg);
        }
      })
      .catch(error => {
        console.error('Error getting venue:', msg);
      });
    },
    toWork(workId){

    }
  }
};
</script>

<style scoped>
.header-row {
  display: flex;
  align-items: center;
}

.el-main {
  overflow: auto;
}
.search-col {
  text-align: right;
  margin-right: 10px; /* 可调整右边距 */
}
.work-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s; /* 添加过渡效果 */

  /* 鼠标悬停时的样式 */
  /* &:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  } */
}

.el-row,
.el-col {
  margin: 0;
}

.info {
  /* color: #ccc; */
}
</style>
